<template>
  <div>
    <v-header></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link to="/goods" tag='a'>商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings" tag='a'>评论</router-link>
      </div>
      <div class="tab-item">
          <router-link to="/seller" tag='a'>商家</router-link>
      </div>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="footer">
      <shopcart></shopcart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from './components/header/header.vue'
  import shopcart from './components/shopcart/shopcart'
  export default {
    components: {
      'v-header': header,
      shopcart
   }
  }
</script>

<style lang='stylus' rel="stylesheet/stylus" scoped>
  @import "./common/stylus/mixin.styl"
  .tab {
    display: flex
    width: 100%
    height:40px
    line-height:40px
    border-1px(rgba(7,17,27,0.1))
    .tab-item{
      flex:1
      text-align:center
      height:100%
      a{
        display:block
        font-size:14px
        color:rgb(77,85,93)
        line-height:40px
        &.active{
            color:rgb(240,20,20)
        }
      }
    }
  }

</style>
